<template>
    <el-menu :default-active="activeIndex" class="sidebar" :unique-opened="true" :collapse="isCollapsed"
        :collapse-transition="true" :style="{ width: isCollapsed ? '64px' : '240px' }" background-color="#151a2e"
        text-color="#fff" active-text-color="#409EFF" @select="handleSelect">
        <!-- Header部分 -->
        <div class="sidebar-header">
            <img v-if="!isCollapsed" src="@/assets/logo.png" alt="Logo" class="header-logo" />
            <el-icon class="collapse-button" @click="toggleSidebar">
                <component :is="isCollapsed ? 'Expand' : 'Fold'">
                    <span class="material-symbols-rounded">
                        <IconMenu />
                    </span>
                </component>
            </el-icon>
        </div>

        <!-- 导航栏部分 -->
        <el-sub-menu index="1">
            <template #title>
                <el-icon>
                    <IconMenu />
                </el-icon>
                <span>预约挂号</span>
            </template>
            <el-menu-item index="Testing" @click="routerPush('/Home/Testing')">Testing</el-menu-item>
            <el-menu-item index="Registration" @click="routerPush('/Home/Registration')">预约挂号</el-menu-item>
            <el-menu-item index="RegistrationManager"
                @click="routerPush('/Home/RegistrationManager')">挂号数据</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
            <template #title>
                <el-icon>
                    <IconMenu />
                </el-icon>
                <span>住院管理</span>
            </template>
            <el-menu-item index="DoctorData" @click="routerPush('/Home/DoctorData')">入院登记</el-menu-item>
            <el-sub-menu index="2-2" @click="routerPush('/Home/DoctorData')">
                <template #title>
                    <el-icon>
                        <Location />
                    </el-icon>
                    <span>就诊管理</span>
                </template>
                <el-menu-item index="DoctorData" @click="routerPush('/Home/DoctorData')">药品配送</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="DoctorData" @click="routerPush('/Home/DoctorData')">出院结算</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="5">
            <template #title>
                <el-icon>
                    <Location />
                </el-icon>
                <span>统计报表</span>
            </template>
            <el-menu-item index="">患者统计</el-menu-item>
            <el-menu-item index="StatisticsMedicine">床位统计</el-menu-item>
            <el-menu-item index="StatisticsRevenue">收入统计</el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="6">
            <template #title>
                <el-icon>
                    <Location />
                </el-icon>
                <span>资源管理</span>
            </template>
            <el-menu-item index="DepartmentData" @click="routerPush('/Home/DepartmentData')">科室管理</el-menu-item>
            <el-menu-item index="Ward" @click="routerPush('/Home/Ward')">病房管理</el-menu-item>
            <el-sub-menu index="6-3">
                <template #title>
                    <el-icon>
                        <Location />
                    </el-icon>
                    <span>药房管理</span>
                </template>
                <el-menu-item index="MedicineAdd" @click="routerPush('/Home/MedicineAdd')">药品采购</el-menu-item>
                <el-menu-item index="Medicine" @click="routerPush('/Home/Medicine')">药品管理</el-menu-item>
            </el-sub-menu>
        </el-sub-menu>
        <el-sub-menu index="7">
            <template #title>
                <el-icon>
                    <Location />
                </el-icon>
                <span>系统管理</span>
            </template>
            <el-sub-menu index="7-1">
                <template #title>
                    <el-icon>
                        <Location />
                    </el-icon>
                    <span>用户管理</span>
                </template>
                <el-menu-item index="PatientManager" @click="routerPush('/Home/PatientManager')">病患管理</el-menu-item>
                <el-menu-item index="DoctorData" @click="routerPush('/Home/DoctorData')">医生信息</el-menu-item>
                <el-menu-item index="JobTitleManager" @click="routerPush('/Home/JobTitleManager')">职位管理</el-menu-item>
                <el-menu-item index="SpecialtyManager" @click="routerPush('/Home/SpecialtyManager')">专业管理</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="7-2">权限管理</el-menu-item>
            <el-menu-item index="7-3">日志管理</el-menu-item>
        </el-sub-menu>


        <!-- 尾部部分 -->
        <div class="sidebar-footer">
            <el-menu-item index="8">
                <el-icon>
                    <Setting />
                </el-icon>
                <span v-show="!isCollapsed">设置</span> <!-- 动态显示文字 -->
            </el-menu-item>
        </div>
    </el-menu>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import {
    Location,
    Document,
    Setting,
    Menu as IconMenu,
    Fold,
    Expand,
} from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const router = useRouter()

const routerPush = (path: string) => {
    router.push(path)
}

const isCollapsed = ref(false);
const activeIndex = ref(); // 默认选中的菜单项

const toggleSidebar = () => {
    screenTop
    isCollapsed.value = !isCollapsed.value;
};

const handleSelect = (index: string) => {
    activeIndex.value = index;
    console.log('选中菜单项:', index);
};
</script>

<style scoped>
.sidebar {
    height: 100vh;
    background-color: #151a2e;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /* 更平滑的贝塞尔曲线 */
}

.sidebar:not(.sidebar-collapsed) {
    width: 240px;
}

.sidebar-collapsed {
    width: 64px;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-logo {
    height: 32px;
}

.collapse-button {
    font-size: 30px;
    color: #fff;
    cursor: pointer;
}

.collapse-button:hover {
    color: #409eff;
}

.el-menu-item,
.el-sub-menu__title {
    border-radius: 8px;
    margin: 4px 8px;
    transition: all 0.3s ease;
}

.el-menu-item.is-active {
    background-color: #fff !important;
    color: #409eff !important;
}

.el-sub-menu.is-active>.el-sub-menu__title {
    background-color: #fff !important;
    color: #409eff !important;
}

.el-menu-item:hover,
.el-sub-menu__title:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.sidebar-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
</style>